<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        7.1 什么是DOM编程

            > 简单来说:DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.

            + DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程
            + document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
            + 根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。

            + dom树中节点的类型
                + node  节点,所有结点的父类型
                    + element   元素节点,node的子类型之一,代表一个完整标签
                    + attribute  属性节点,node的子类型之一,代表元素的属性
                    + text          文本节点,node的子类型之一,代表双标签中间的文本
        ## 7.2 获取页面元素的几种方式

            ### 7.2.1 在整个文档范围内查找元素结点

            | 功能               | API                                     | 返回值           |
            | ------------------ | --------------------------------------- | ---------------- |
            | 根据id值查询       | document.getElementById(“id值”)         | 一个具体的元素节 |
            | 根据标签名查询     | document.getElementsByTagName(“标签名”) | 元素节点数组     |
            | 根据name属性值查询 | document.getElementsByName(“name值”)    | 元素节点数组     |
            | 根据类名查询       | document.getElementsByClassName("类名") | 元素节点数组     |

            ### 7.2.2 在具体元素节点范围内查找子节点

            | 功能               | API                       | 返回值         |
            | ------------------ | ------------------------- | -------------- |
            | 查找子标签         | element.children          | 返回子标签数组 |
            | 查找第一个子标签   | element.firstElementChild | 标签对象       |
            | 查找最后一个子标签 | element.lastElementChild  | 节点对象       |

            ### 7.2.3 查找指定子元素节点的父节点

            | 功能                     | API                   | 返回值   |
            | ------------------------ | --------------------- | -------- |
            | 查找指定元素节点的父标签 | element.parentElement | 标签对象 |

            ### 7.2.4  查找指定元素节点的兄弟节点

            | 功能               | API                         | 返回值   |
            | ------------------ | --------------------------- | -------- |
            | 查找前一个兄弟标签 | node.previousElementSibling | 标签对象 |
            | 查找后一个兄弟标签 | node.nextElementSibling     | 标签对象 |
        */
        /* 
            1 获得document  dom树
                window.document
            2 从document中获取要操作的元素
                1. 直接获取
                    var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
                    var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
                    var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
                    var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
                2. 间接获取
                    var cs=div01.children // 通过父元素获取全部的子元素
                    var firstChild =div01.firstElementChild  // 通过父元素获取第一个子元素
                    var lastChild = div01.lastElementChild   // 通过父元素获取最后一个子元素
                    var parent = pinput.parentElement  // 通过子元素获取父元素
                    var pElement = pinput.previousElementSibling // 获取前面的第一个元素
                    var nElement = pinput.nextElementSibling // 获取后面的第一个元素
            3 对元素进行操作
                1. 操作元素的属性
                2. 操作元素的样式
                3. 操作元素的文本
                4. 增删元素   
        */
        function fun1(){
                //1 获得document
                //2 通过document获得元素
                var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
                console.log(el1)
        }
        function fun2(){
                var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
                for(var i = 0 ;i<els.length;i++){
                    console.log(els[i])
                }
        }
        function fun3(){
                var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
                console.log(els)
                for(var i =0;i< els.length;i++){
                    console.log(els[i])
                }
        }

        function fun4(){
            var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
            for(var i =0;i< els.length;i++){
                    console.log(els[i])
                }
        }

        function fun5(){
            // 先获取父元素
            var div01 = document.getElementById("div01")
            // 获取所有子元素
            var cs=div01.children // 通过父元素获取全部的子元素
            for(var i =0;i< cs.length;i++){
                    console.log(cs[i])
            }

            console.log(div01.firstElementChild)  // 通过父元素获取第一个子元素
            console.log(div01.lastElementChild)   // 通过父元素获取最后一个子元素
        }

        function fun6(){
                // 获取子元素
                var pinput =document.getElementById("password")
                console.log(pinput.parentElement) // 通过子元素获取父元素
        }

        function fun7(){
                // 获取子元素
                var pinput =document.getElementById("password")
                console.log(pinput.previousElementSibling) // 获取前面的第一个元素
                console.log(pinput.nextElementSibling) // 获取后面的第一个元素
        }
    </script>
</head>
<body>
    <div id="div01">
        <input type="text" class="a" id="username" name="aaa"/>
        <input type="text" class="b" id="password" name="aaa"/>
        <input type="text" class="a" id="email"/>
        <input type="text" class="b" id="address"/>
    </div>
    <input type="text" class="a"/><br>

    <hr>
    <input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05"/>
    <input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06"/>
    <input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()" id="btn07"/>
    <hr>

    <input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01"/>
    <input type="button" value="根据标签名获取多个元素" onclick="fun2()" id="btn02"/>
    <input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03"/>
    <input type="button" value="根据class属性值获得多个元素" onclick="fun4()" id="btn04"/>
</body>
</html>